function pMake(x, y, z) {
	particle = new THREE.Particle(material);
	position = particle.position;
	position.x = x;
	position.y = y;
	position.z = z;
	return position;
}

function pStr(position) {
	return position.x + "," + position.y + "," + position.z;
}

var material = {};
var mouseX = 0, mouseY = 0, windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2;
var SEPARATION = 200, AMOUNTX = 10, AMOUNTY = 10, camera, scene, renderer;
var container, separation = 100, amountX = 50, amountY = 50, particles, particle;

function init() {

	var PI2 = Math.PI * 2;
	material = new THREE.ParticleCanvasMaterial({
		color : 0xffffff,
		program : function(context) {
			context.beginPath();
			context.arc(0, 0, 1, 0, PI2, true);
			context.closePath();
			context.fill();
		}
	});

	container = document.createElement('div');
	document.body.appendChild(container);
	//container=$('#mphDiv');
	console.log("-->"+container);

	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.z = 100;

	scene = new THREE.Scene();

	scene.add(camera);

	renderer = new THREE.CanvasRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	container.appendChild(renderer.domElement);
	//container.add(renderer.domElement);

	// particles

	var geometry = new THREE.Geometry();

	for(var i = 0; i < 10; i++) {

		particle = new THREE.Particle(material);
		particle.position.x = Math.random() * 2 - 1;
		particle.position.y = Math.random() * 2 - 1;
		particle.position.z = Math.random() * 2 - 1;
		particle.position.normalize();
		particle.position.multiplyScalar(Math.random() * 10 + 450);
		particle.scale.x = particle.scale.y = 5;
		scene.add(particle);
		geometry.vertices.push(particle.position);

	}

	// lines

	var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
		color : 0xffffff,
		opacity : 0.5
	}));
	scene.add(line);
	var geo1 = new THREE.Geometry();

	console.log('well, ' + pMake);

	//draw the z axis
	geo1.vertices.push(pMake(0, 0, -100));
	geo1.vertices.push(pMake(0, 0, 100));
	geo1.vertices.push(pMake(0, 0, 0));

	//x-axis
	geo1.vertices.push(pMake(-100, 0, 0));
	geo1.vertices.push(pMake(100, 0, 0));
	geo1.vertices.push(pMake(0, 0, 0));

	//y-axis
	geo1.vertices.push(pMake(0, -100, 0));
	geo1.vertices.push(pMake(0, 100, 0));
	particle = new THREE.Particle(material);
	particle.position.x = 0;
	particle.position.y = 0;
	particle.position.z = 0;
	geo1.vertices.push(particle.position);
	var line1 = new THREE.Line(geo1, new THREE.LineBasicMaterial({
		color : 0xffffff,
		opacity : 0.5
	}));
	scene.add(line1);

	document.addEventListener('mousemove', onDocumentMouseMove, false);
	document.addEventListener('touchstart', onDocumentTouchStart, false);
	document.addEventListener('touchmove', onDocumentTouchMove, false);

}

function showText(){
	var text3d = new THREE.TextGeometry(theText, {
		size : 80,
		height : 20,
		curveSegments : 2,
		font : "helvetiker"
	});
}

function onDocumentTouchMove(event) {
	if(event.touches.length == 1) {
		event.preventDefault();
		mouseX = event.touches[0].pageX - windowHalfX;
		mouseY = event.touches[0].pageY - windowHalfY;
	}
}

function animate() {
	requestAnimationFrame(animate);
	render();
}

function onDocumentMouseMove(event) {

	mouseX = event.clientX - windowHalfX;
	mouseY = event.clientY - windowHalfY;
	spot = spot + .04;
	zSpot -= .1;
}

function onDocumentTouchStart(event) {

	if(event.touches.length > 1) {
		event.preventDefault();
		mouseX = event.touches[0].pageX - windowHalfX;
		mouseY = event.touches[0].pageY - windowHalfY;
	}
}

var spot = 0;
var zSpot = 100;
function render() {
	$('#xVal').text('hey');
	console.log(spot);
	camera.position.x = Math.sin(spot);
	camera.position.y = Math.cos(spot);
	camera.position.z = zSpot;
	//				camera.position.x += ( mouseX - camera.position.x ) * .05;
	//				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
	camera.lookAt(scene.position);
	renderer.render(scene, camera);
}
